<template>
    <MainLayout>
     <router-view></router-view>
      <el-card>
    <h3>首页</h3>

    <!-- 统计信息 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-item">
            <div class="stat-value">{{ userCount }}</div>
            <div class="stat-label">总用户数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-item">
            <div class="stat-value">{{ todayNewUsers }}</div>
            <div class="stat-label">今日新增</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-item">
            <div class="stat-value">{{ activeRate }}%</div>
            <div class="stat-label">用户活跃度</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-item">
            <div class="stat-value">{{ averageRating }}</div>
            <div class="stat-label">平均评分</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据分析图表 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">用户增长趋势</div>
          <div class="chart-container">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="updateChartData"
              :default-value="defaultDateRange"
            />
            <el-divider />
            <el-chart
              :data="chartData"
              :settings="chartSettings"
              :height="300"
              :extend="chartExtend"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">用户地域分布</div>
          <div class="chart-placeholder">
            <el-progress type="circle" :percentage="regionDistribution" />
          </div>
        </el-card>
      </el-col>
    </el-row>
      </el-card>  
    </MainLayout>
</template>

<script>
import MainLayout from '@/layouts/MainLayout.vue'
export default {
  components: {
    MainLayout
   },
  data() {
    const currentYear = new Date().getFullYear();
    const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    const currentMonth = new Date().getMonth();

    const defaultStart = new Date(currentYear, 0, 1);
    const defaultEnd = new Date(currentYear, currentMonth, 1);

    return {
      userCount: 256,
      todayNewUsers: 12,
      activeRate: 78,
      averageRating: 4.5,
      regionDistribution: 45,
      dateRange: [new Date(defaultStart), new Date(defaultEnd)],
      defaultDateRange: [defaultStart, defaultEnd],
      chartSettings: {
        axisSite: { right: ['用户增长'] },
        yAxisType: ['normal'],
        dimension: '日期',
        metrics: '数量',
        scale: ['linear'],
      },
      chartData: {
        columns: ['日期', '数量'],
        rows: [],
      },
      chartExtend: {
        series: {
          smooth: true,
          itemStyle: { color: '#409EFF' },
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
        },
        yAxis: {
          type: 'value',
        },
      },
    };
  },
  mounted() {
    this.updateChartData();
  },
  methods: {
    updateChartData() {
      const start = new Date(this.dateRange[0]);
      const end = new Date(this.dateRange[1]);
      const rows = [];

      if (!(start instanceof Date && !isNaN(start)) || !(end instanceof Date && !isNaN(end))) {
        console.error('日期范围非法');
        return;
      }

      let currentDate = new Date(start);

      while (currentDate <= end) {
        const dateLabel = `${currentDate.getMonth() + 1}月${currentDate.getDate()}日`;
        rows.push({
          日期: dateLabel,
          数量: Math.floor(Math.random() * 200) + 50,
        });
        currentDate.setDate(currentDate.getDate() + 1);
      }

      this.chartData.rows = rows;
    },
  },
};
</script>

<style scoped>
.stats-row {
  margin-bottom: 24px;
}

.stat-item {
  text-align: center;
  padding: 20px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.stat-label {
  color: #909399;
}

.chart-row {
  margin-top: 24px;
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.chart-placeholder {
  height: 300px;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.chart-container {
  padding: 16px;
}

.el-date-picker {
  width: 100%;
  margin-bottom: 16px;
}
</style>
